<template>
  <div>
    <ContentTitle :info="ctInfo"> </ContentTitle>
    <div class="box mt-20 bg-fff">
      <div class="flex box3">
        <span class="box1 f14">群组名称:</span>
        <el-input
          placeholder="请输入内容"
          style="width: 200px; margin-left: 30px"
          v-model="keyword"
        ></el-input>
        <el-button type="primary" @click="search" style="margin-left: 10px"
          >搜索</el-button
        >
        <span class="f14 text1">搜索结果:{{ total }}</span>
      </div>

      <div class="box2 mr-30">
        <el-button type="primary">
          <span @click="getadd" class="add"> 新增群组+</span>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            width="30%"
            destroy-on-close
          >
            <div class="test">
              <div class="box">
                <span>群组单位</span>
                <el-input v-model="groupName" clearable></el-input>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="allclick">确 定</el-button>
            </span>
          </el-dialog>
        </el-button>
      </div>
    </div>
    <div class="SearchResultTab">
      <el-table :data="devListData" style="width: 100%" border>
        <el-table-column type="index"> </el-table-column>

        <el-table-column prop="id" label="序号"> </el-table-column>

        <el-table-column prop="groupName" label="群组名称"> </el-table-column>

        <el-table-column prop="nodeNums" label="传感器节点"> </el-table-column>

        <el-table-column prop="onlineNums" label="在线设备数量">
        </el-table-column>
        <el-table-column prop="cTime" label="创建时间" :formatter="formatdata1">
        </el-table-column>

        <el-table-column prop="loop" label="操作">
          <template #default="scope">
            <el-button type="text" size="small" @click="edit(scope.row)"
              >重命名</el-button
            >
            <el-button type="text" size="small" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex jc-c pt-10 bg-fff pb-10">
      <el-pagination
        background
        :hide-on-single-page="true"
        :current-page="currPage"
        @current-change="changePage"
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";
import {
  $devicegroupList,
  $deviceaddList,
  $devicdelList,
  $deviceditList,
} from "../../api/index";
export default {
  components: { ContentTitle },
  data() {
    return {
      ctInfo: {
        type: "测量",
        text: "测量类型的增删改查",
        msg: "展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。",
      },
      currPage: 1,
      keyword: "",
      pageSize: 5,
      devListData: [],
      dialogVisible: false,
      groupName: "",
      total: 0,
      currPage: 1,
      isEdit: true,
      id: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changePage(page) {
      this.currPage = page;
      this.getList();
    },
    //新添数组
    getadd() {
      this.isEdit = false;
      this.dialogVisible = true;
      this.groupName = "";
    },
    //修改数组
    edit(row) {
      this.isEdit = true;
      this.dialogVisible = true;
      this.groupName = row.groupName;
      this.id = row.id;
    },
    //确定按钮
    allclick() {
      if (this.isEdit) {
        let parmas = {
          id: this.id,
          groupName: this.groupName,
        };
        $deviceditList(parmas).then((res) => {
          this.row = res.data;
          this.getList();
          this.dialogVisible = false;
        });
      } else {
        $deviceaddList({ groupName: this.groupName }).then((res) => {
          this.dialogVisible = false;
          this.getList();
        });
      }
    },
    search() {
      this.getList();
    },
    //删除按钮
    del(row) {
      let parmas = {
        id: row.id,
      };
      $devicdelList(parmas).then((res) => {
        this.getList();
      });
    },
    //渲染列表
    getList() {
      this.keyword = this.keyword.trim();
      let parmas = {
        currPage: this.currPage,
        pageSize: this.pageSize,
        keyword: this.keyword,
      };
      $devicegroupList(parmas).then((res) => {
        this.total = res.total;
        this.devListData = res.data;
      });
    },
  },
};
</script>

<style>
.box {
  display: flex;
  height: 60px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.box1,
.box2 {
  display: flex;
  align-items: center;
}
.text1 {
  display: flex;
  align-items: center;
  width: 200px;
}
.add {
  height: 50px;
  width: 100%;
}
</style>